<template>
    <view class="container" :style="themeColor">
        <search-bar
            :placeholderText="placeholderText"
            :gosearch="true"
            :setBg="setBg"
            @searchFn="searchFn"></search-bar>
        <view>
            <tab-bar :tabs="tabs" :setbg="setbg" @clickTab="clickTab" :tabIndex="tabIndex"></tab-bar>
            <view class="botline"></view>
            <view class="main-dom product-main">
                <scroll-view
                    class="product-main-nav"
                    scroll-y="true"
                    :scroll-top="scrollTop"
                    :style="{ height: listHeight2 }"
                    v-if="tabIndex == 0">
                    <view class="vue-tree">
                        <view
                            class="tree-item"
                            v-for="item in classifyList"
                            :key="item.strid"
                            :class="{ active: selectIndex == item.index ? true : false }"
                            @click="clickTitle(item)">
                            <view class="tree-content">
                                <view class="border"></view>
                                <text class="tree-label">{{ item.name }}</text>
                            </view>
                        </view>
                    </view>
                    <!-- <scroll-view :style="{height: viewHeight}" scroll-y="true" :scroll-top="scrollTop">
						<view v-for="item in titleContenData" :key="item.id"
							:class="{'left_column_for': true, activity: selectIndex==item.index?true:false}"
							@click="clickTitle(item)">
							{{item.title}}
						</view>
					</scroll-view> -->
                </scroll-view>

                <view class="product-main-list">
                    <scroll-view
                        v-if="tabIndex == 0 && loadOk"
                        class="classify_gather"
                        :style="{ height: listHeight2 }"
                        scroll-y="true"
                        :scroll-into-view="selectId"
                        scroll-with-animation="true"
                        @scroll="scroll">
                        <view
                            class="gather_main"
                            :id="item.strid"
                            v-for="(item, index) in classifyList"
                            :key="item.strid">
                            <view class="gather_title"
                                ><text class="long"></text><text class="short"></text
                                ><text class="name">{{ item.name }}</text
                                ><text class="short"></text><text class="long"></text
                            ></view>
                            <view class="gather_sub">
                                <view v-for="subitem in item.children" @click="goClass(subitem, item)">
                                    <image :src="easyGetImgUrl(subitem.img)" mode="aspectFill"></image>
                                    <view>{{ subitem.name }}</view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                    <swiper
                        class="swiper"
                        v-if="tabIndex != 0"
                        :class="tempType == 1 ? 'p-b-120' : ''"
                        :style="{ height: listHeight2 }"
                        :current="tabIndex"
                        @change="swiperChange">
                        <swiper-item v-if="loadOk" v-for="(swiperItem, swiperIndex) in tabs" :key="swiperIndex">
                            <product-list
                                :ref="'productList_' + swiperIndex"
                                :requestData="requestData"
                                :height="listHeight2"
                                :isHideProImg="isHideProImg"
                                @sku="sku"
                                @amountProp="amountProp"
                                :infoType="swiperIndex"
                                :displayData="displayData"
                                :tempType="tempType"
                                :isOnShow="isOnShow"
                                @upFavorite="upFavorite"
                                @isUpNum="isUpNum"
                                :isClass="isClass"
                                @loadNoMoreBack="loadNoMoreBack">
                            </product-list>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
        <uni-popup ref="popAmountTip" type="center" class="popAmountTip" :animation="false" :maskClick="true">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>输入订购数量</text>
                </view>
                <!-- #ifdef APP -->
                <input
                    confirm-type="search"
                    :auto-focus="true"
                    maxlength="10"
                    type="digit"
                    v-model="popinputAmount"
                    class="btn-input" />
                <!-- #endif -->
                <!-- #ifndef APP -->
                <input
                    confirm-type="search"
                    :focus="isFocus"
                    maxlength="10"
                    :selection-start="selectionStart"
                    :selection-end="selectionEnd"
                    type="digit"
                    v-model="popinputAmount"
                    class="btn-input" />
                <!-- #endif -->

                <view class="pop-action">
                    <view @click="popAmountClose">取消</view>
                    <view @click="popAmountConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
        <uni-popup type="bottom" ref="popSku" @change="skuChange" class="flxedtop">
            <product-spec
                v-if="showPopSku"
                :data="optPopup.data"
                :tempType="tempType"
                :fresh="optPopup.change"
                :popup-type="optPopup.type"
                @changeProductData="changeProductData"
                @closePopup="closePopup"
                @addCart="addCart"
                @addBatch="addBatch"
                @setCarListFunc="setCarListFunc">
            </product-spec>
        </uni-popup>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import searchBar from "@/components/common/search-bar.vue"
import tabBar from "@/components/common/tab-bar.vue"
import productListFilter from "@/components/product/product-list-filter.vue"
import productList from "@/components/productClass/product-list.vue"
import navTree from "@/components/productClass/nav-tree.vue"
import productSpec from "@/components/productClass/product-spec.vue"
import { getPlatform } from "@/uni-sub-base/utils/platformUtil.js"
import { getElementHeight, getElementTop } from "@/uni-sub-base/utils/elementUtil.js"
import { getProductDisplay } from "@/utils/appInit.js"

import { getProductTypeTree, productBrandList, getTagList } from "@/service/api/product.js"
import config from "@/config/config.js"
import numPopup from "@/components/order/num-popup.vue"
import utilsOld from "@/utils/utilsOld.js"
import { updateCart } from "@/utils/cartUtil.js"
// 防抖
let scrolltimer = undefined
export default {
    components: {
        searchBar,
        productListFilter,
        productList,
        tabBar,
        navTree,
        productSpec,
    },
    props: {
        //列表位置 0商品 1无单退货
        tempType: {
            type: Number,
            default: 0,
        },
        isOnShow: {
            type: Boolean,
            default: true,
        },
        isClass: {
            type: Boolean,
            default: false,
        },
        isLimit: {
            type: Boolean,
            default: false,
        },
        currentClass: {
            type: String,
            default: "0",
        },
        refreshView: {
            type: Boolean,
            default: false,
        },
        visible: {
            type: Boolean,
            default: false,
        },
        tabindexID: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            setbg: true,
            popinputAmount: "",
            inputAmount: "",
            numPopShow: false,
            activeId: -1,
            classifyList: [],
            secondClassifyList: [],
            isFold: true,
            skuModel: false,
            isHideProImg: false,
            actions: [],
            placeholderText: "请输入商品名称",
            setBg: true,
            searchValue: "",
            tabIndex: 0,
            tabs: [
                {
                    title: "全部",
                },
                {
                    title: "常购",
                },
                {
                    title: "收藏",
                },
                {
                    title: "促销",
                },
            ],
            navHeight: 0, //nav所需高度
            listHeight: 0, //list所需高度
            listHeight1: 0, //list所需高度
            listHeight2: 0, //list所需高度
            listHeightNoneSub: 0, //list所需高度
            initHeight: 0,
            productDatas: [],
            navItems: [],
            currentNav: 0,
            isloadding: false,
            loadOk: false,
            // sku 商品规格弹窗
            optPopup: {
                data: {},
                type: "",
                change: false,
                show: true,
            },
            isClosePop: false,
            treeOk: false,
            tags: [],
            brands: [],
            // 请求参数
            requestData: {
                ProductType: 1,
                OrderBy: "display_sequence",
                Sort: "desc",
            },
            displayData: {},
            showPopSku: false,
            timer: null,
            isUp: true,
            isShowFilter: false,
            popTop: "",
            popite: {},
            popitem: {},
            poptype: null,
            popdisplayData: {},
            poprefresh: false,
            isShowFilter: false,
            popTop: "",
            tagId: "",
            brandId: "",
            totalClassify: {},
            isFocus: false,
            selectionStart: -1,
            selectionEnd: 0,
            isIos: false,
            selectId: "",
            viewoneTop: 0,
            // 设置高亮
            selectIndex: 0,
            // 设置左栏顶部距离
            scrollTop: 0,
        }
    },

    watch: {
        //监听购物车数据
        getUpView(e) {
            //获取总数
            this.refresh()
        },
        visible: {
            handler(newVal) {
                if (newVal) {
                    this.classifyList = []
                    this.GetProductDisplay()
                    this.getProductTypeTree()
                }
            },
            immediate: true,
        },
        refreshView(e) {
            if (e) {
                this.classifyList = []
                this.GetProductDisplay()
                this.getProductTypeTree()
            }
        },
        tabindexID(e) {
            if (e) {
                this.clickTab(e)
            }
        },
    },
    computed: {
        ...mapGetters(["getUpView"]),
    },
    onShow() {
        //多选规格批量操作回来返回UI处理
        //#ifdef MP
        let pages = getCurrentPages()
        let currPage = pages[pages.length - 1] //当前页
        // 直接用this.currPage.data去取B页面传递过来的数据
        this.isClosePop = currPage.data.isClosePop
        //#endif

        if (this.isClosePop) {
            this.$refs.popSku.close()
            this.isClosePop = false
        }
    },
    mounted() {
        if (getPlatform() == "ios") {
            this.isIos = true
        } else {
            this.isIos = false
        }
        // this.actions = [{
        // 	type: "cart",
        // 	id: 2,
        // 	iconType: 1
        // }]
    },
    methods: {
        changeProductData(product) {
            console.log("product:", product.V_StockSum)
            this.optPopup.data = product
            this.optPopup.change = true
        },
        goClass(subitem, item) {
            this.easyGoTo("/pages_classify/packet/product/productClass?typeId=" + subitem.id + "&classid=" + item.id)
        },
        choseClassify(item) {
            if (this.activeId !== item.id) {
                this.resetClass(item, false)
            }
        },
        getTop() {
            getElementTop(this, ".pop", (e) => {
                this.popTop = e
            })
        },
        // 获取整体显示设置
        GetProductDisplay() {
            getProductDisplay().then((res) => {
                if (res) {
                    this.displayData = res.Data
                }
            })
        },
        //商品分类树列表
        getProductTypeTree() {
            let param = {
                InfoType: 1,
                parent_path: "_0_2_",
            }
            getProductTypeTree(param).then((res) => {
                this.getNavData(res)
            })
        },
        getNavData(res) {
            let that = this
            if (res) {
                this.initClassify = false
                this.classifyList = []
                if (res.Data.children && res.Data.children.length > 0) {
                    res.Data.children.forEach((item, index) => {
                        item.index = index
                        item.strid = "id" + item.id
                        this.classifyList.push(item)
                    })
                }
                this.selectId = this.classifyList[0].strid
                this.selectIndex = 0
                setTimeout(function () {
                    const query = uni.createSelectorQuery().in(that)
                    query
                        .selectAll(".product-main-list")
                        .boundingClientRect((VNodeAll) => {
                            VNodeAll.forEach(({ top }, i) => {
                                that.viewoneTop = top
                                // 获取并存储每个视图到顶部的距离
                            })
                        })
                        .exec()
                    query
                        .selectAll(".gather_main")
                        .boundingClientRect((VNodeAll) => {
                            VNodeAll.forEach(({ top }, i) => {
                                // 获取并存储每个视图到顶部的距离
                                that.classifyList[i].viewTop = top
                            })
                        })
                        .exec()
                }, 800)

                // this.activeId = res.Data.id

                setTimeout(() => {
                    this.refresh()
                }, 300)
                this.getListHeight()
            }
        },

        //刷新列表
        refresh() {
            if (this.getMenuStyle() == 0 || this.getMenuStyle() == 2) {
                if (this.$refs.productList_0 && this.$refs.productList_0[0]) {
                    this.$refs.productList_0[0].refresh(this.requestData)
                }
                if (this.$refs.productList_1 && this.$refs.productList_1[0]) {
                    this.$refs.productList_1[0].refresh(this.requestData)
                }
                if (this.$refs.productList_2 && this.$refs.productList_2[0]) {
                    this.$refs.productList_2[0].refresh(this.requestData)
                }
                if (this.$refs.productList_3 && this.$refs.productList_3[0]) {
                    this.$refs.productList_3[0].refresh(this.requestData)
                }
            } else if (this.getMenuStyle() == 1) {
                this.$refs.swiperIndex.refresh(this.requestData)
            }
        },
        //收藏触发更新
        upFavorite(infoType) {
            if (infoType == 2) {
                if (this.$refs.productList_0 && this.$refs.productList_0[0]) {
                    this.$refs.productList_0[0].refresh(this.requestData)
                }
            } else if (infoType == 0) {
                if (this.$refs.productList_2 && this.$refs.productList_2[0]) {
                    this.$refs.productList_2[0].refresh(this.requestData)
                }
            }
        },
        getListHeight(isHome = false) {
            //获取商品高度
            getElementHeight(this, ".main-dom", (e) => {
                this.initHeight = e
                this.listHeight = e + "px"
                if (this.isIos) {
                    this.listHeight1 = e - 62 + "px"
                    this.listHeight2 = e - 62 + "px"
                } else {
                    this.listHeight1 = e - 62 + "px"
                    this.listHeight2 = e - 62 + "px"
                }
                this.listHeightNoneSub = e + "px"
                this.loadOk = true
            })
        },

        searchFn(searchText) {
            //搜索
            this.easyGoTo("/pages_shop/packet/search/index")
        },
        resetClass(item, bool = true) {
            const that = this
            that.activeId = item.id
            that.typePath = item.parent_path
            that.requestData.typePath = item.parent_path
        },
        goCart() {
            uni.navigateTo({
                url: "/pages/cart/cartTemp",
            })
        },

        sku(item) {
            this.showPopSku = true
            this.optPopup.type = "attr"
            this.optPopup.data = item
            this.$refs.popSku.open()
        },
        amountProp(ite, item, type, displayData) {
            this.popite = ite
            this.popitem = item
            this.poptype = type
            this.popdisplayData = displayData
            if (ite.Amount == 0) {
                this.popinputAmount = 0
            } else {
                this.popinputAmount = ite.Amount
            }
            this.$refs.popAmountTip.open()
            setTimeout((e) => {
                this.isFocus = true
                this.selectionStart = 0
                this.selectionEnd = this.popinputAmount.toString().length
            }, 100)
        },
        addCart(e) {
            this.$refs.popSku.close()
        },
        addCartBatch(e) {},
        addBatch(e) {
            this.$refs.popSku.close()
            this.$refs.popBatch.open()
        },
        buyNow() {},
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (index == 0) {
                this.classifyList = []
                this.getProductTypeTree()
            }
            if (this.tabIndex != index) {
                clearTimeout(this.timer)
                this.timer = setTimeout((time) => {
                    this.tabIndex = index
                    this.requestData.infoType = index
                    if (index != 0) {
                        this.requestData.typePath = "_0_2_"
                    }
                }, 20)
                if (!this.isUp) {
                    this.$emit("upCart", true)
                    this.isUp = true
                }
            }
            // this.refresh()
        },
        // 点击分类事件
        clickTitle(item) {
            this.selectId = item.strid
            // 设置高亮
            this.selectIndex = item.index
        },
        closePopup() {
            this.$refs.popSku.close()
        },
        setCarListFunc() {
            this.$forceUpdate()
        },
        closePopupBatch() {
            this.$refs.popBatch.close()
        },
        setCarListFuncBatch() {
            this.$forceUpdate()
        },
        filterFn(data) {
            this.requestData.OrderBy = data.OrderBy
            this.requestData.Sort = data.Sort
            this.refresh()
        },
        filterBrandFn(data) {
            let ids = []
            data.forEach((e) => {
                if (e.checked) {
                    ids.push(e.Id)
                }
            })
            this.requestData.BrandIds = ids.join(",")
            this.refresh()
        },
        filterTagFn(data) {
            let ids = []
            data.forEach((e) => {
                if (e.checked) {
                    ids.push(e.Id)
                }
            })
            this.requestData.TagIds = ids.join(",")
            this.refresh()
        },
        TagloadingFn(item) {
            this.requestData.TagIds = ""
            this.getTagList(this.activeId, item)
        },
        skuChange(e) {
            if (!e.show) {
                this.showPopSku = false
                // this.$nextTick(e=>{
                // 	this.showPopSku = true
                // })
            }
        },
        isUpNum(e) {
            this.isUp = e
        },
        getMenuStyle() {
            if (this.isClass) {
                return 1
            }
            if (this.displayData && typeof this.displayData.CategoryStyle == "number") {
                return this.displayData.CategoryStyle
            }
            return config.appSet.proMenuStyle
        },
        getIsFilter() {
            let isFilter =
                (this.requestData.BrandIds && this.requestData.BrandIds != "") ||
                (this.requestData.minPrice && this.requestData.minPrice != 0) ||
                (this.requestData.maxPrice && this.requestData.maxPrice != 0)
            return isFilter
        },
        loadNoMoreBack(e) {
            if (e) {
                let objItem = {}
                let hasIn = false
                if (!this.classifyList || this.classifyList.length < 1) {
                    return
                }
                if (this.activeId == this.classifyList[0].id) {
                    //当前是全部分类
                    this.treeClickEvent(this.classifyList[1])
                } else {
                    for (var i = 0; i < this.classifyList.length; i++) {
                        let item = this.classifyList[i]
                        if (item.id == this.activeId) {
                            //判断当前是否是大类
                            this.hasIn = true
                            if (i != this.classifyList.length - 1) {
                                objItem = this.classifyList[i + 1]
                            } else {
                                objItem = this.classifyList[0]
                            }
                            this.treeClickEvent(objItem)
                            return
                        }
                    }
                    if (!hasIn) {
                        for (var i = 1; i < this.classifyList.length; i++) {
                            let item = this.classifyList[i]
                            let path = item.parent_path
                            if (this.typePath.includes(path)) {
                                let item = this.classifyList[i]
                                if (i != this.classifyList.length - 1) {
                                    objItem = this.classifyList[i + 1]
                                } else {
                                    objItem = this.classifyList[0]
                                }
                                this.treeClickEvent(objItem)
                                return
                            }
                        }
                    }
                }
            }
        },
        scroll({ detail: { scrollTop } }) {
            let that = this
            // 防抖
            // scrolltimer定义在全局
            // 如果没有防抖会触发许多次
            // 对性能不友好
            if (scrolltimer !== undefined) clearTimeout(scrolltimer)

            scrolltimer = setTimeout(function () {
                // 当右侧滚动到顶部时强制赋值为0
                // 因为在滚动时一般获取到的数据是0-10的范围
                // 小概率会获取到0
                // 因为原先存储viewTop属性的第一个值就是0
                let viewoneTop = that.viewoneTop / 2
                scrollTop = scrollTop < 10 ? 0 : scrollTop
                let selectIndex = that.classifyList.findIndex((item) => item.viewTop - viewoneTop >= scrollTop)
                // 设置高亮
                that.selectIndex = selectIndex
                if (selectIndex == -1) {
                    that.selectIndex = 0
                } else {
                    that.selectIndex = selectIndex
                }
                // 此属性联动左侧滚动条
                // 当右侧滚动时
                // 左侧也会相应的滚动
                // 只是滚动的距离不一样
                // that.scrollTop = 2 * that.selectIndex;
                that.$forceUpdate()
            }, 100)
        },
    },
}
</script>

<style lang="scss">
.stop-scroll {
    position: fixed;
    height: 100%;
    overflow: hidden;
    width: 100%;
}
.product-main {
    display: flex;
    flex-direction: row;

    .product-main-nav {
        display: flex;
        flex: 1.3;
        flex-direction: column;
        // background: $uni-bg-color-grey;
        position: relative;
        z-index: 10;
        overflow-y: scroll;
    }

    .product-main-list {
        // display: flex;
        flex: 3.5;
        // justify-content: center;
        background: $uni-bg-color-grey;
        position: relative;
        z-index: 1;
        margin-left: -8rpx;
    }

    .p-b-120 {
        padding-bottom: 120rpx;
    }
}

.swiper {
    // background: $color-white;
}

.product-main-1 {
    .product-main-list {
        padding: 0 $app-page-padding;
        background: $uni-bg-color-grey;
    }

    .p-b-120 {
        padding-bottom: 120rpx;
    }
}

.nav-bar {
    display: flex;
    height: 88rpx;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    background: $color-white;
    border-bottom: solid 1rpx $line;

    .nav-bar-scroll {
        display: flex;
        flex-direction: row;
        width: calc(100% - 110rpx);
    }

    .nav-bar-action {
        display: flex;
        flex-direction: row;
        align-items: center;

        .line {
            width: 1rpx;
            height: 26rpx;
            background: #ccc;
        }

        .filter-box {
            min-width: 60rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 28rpx;

            .filter-box-icon {
                display: flex;
            }

            .filter-box-text {
                font-size: $font-size-20;
            }
        }
    }
}

.secondClassify {
    width: 100%;
    box-sizing: border-box;
    background: $color-white;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 32rpx 50rpx 0 20rpx;
    position: relative;

    .secondClassify-item {
        flex-shrink: 0;
        flex-grow: 0;
        padding: 6rpx 16rpx;
        font-size: $font-size-26;
        line-height: 1.5;
        background-color: $color-gray-5;
        border-radius: 42rpx;
        margin: 0 24rpx 24rpx 0;
    }

    .active-item {
        color: $color-white;
        background: $color-main;
    }

    .fold-icon {
        position: absolute;
        width: 50rpx;
        height: 50rpx;
        top: 32rpx;
        right: 0;
        background: $color-white;
        padding-left: 16rpx;

        // background: #eee;
        &:after {
            content: "";
            position: absolute;
            top: 10rpx;
            left: 14rpx;
            width: 15rpx;
            height: 15rpx;
            transform: rotate(45deg);
            border: 2rpx solid;
            border-color: transparent $color-gray-3 $color-gray-3 transparent;
        }
    }

    .unfold-icon {
        &:after {
            transform: rotate(-135deg);
            top: 20rpx;
        }
    }
}

.secondClassify-unfold {
    flex-wrap: wrap;
}
.botline {
    height: 1rpx;
    background: #ebebeb;
}
.color3 {
    color: $color-gray-3;
    font-size: 24rpx;
}
.classify_gather {
    // padding:0 16rpx 0 20rpx;
}
.gather_main {
    background: #ffffff;
    border-radius: 16rpx;
    margin: 0 16rpx 16rpx 20rpx;
}
.gather_title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32rpx 0;
    .name {
        color: #333333;
        font-size: 28rpx;
        font-weight: bold;
        padding: 0 12rpx;
    }
    .long {
        width: 40rpx;
        height: 2rpx;
        background: #333333;
        border-radius: 4rpx;
        margin: 0 8rpx;
    }
    .short {
        width: 12rpx;
        height: 2rpx;
        background: #333333;
        border-radius: 4rpx;
    }
}
.gather_sub {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    image {
        width: 128rpx;
        height: 128rpx;
        border-radius: 12rpx;
        // background: $app-color-main;
    }
    &:after {
        content: "";
        display: block;
        flex: 1;
    }
    & > view {
        width: 128rpx;
        margin: 0 22rpx 0 22rpx;
        view {
            font-size: 26rpx;
            color: #333333;
            text-align: center;
            margin-bottom: 32rpx;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
}
.vue-tree {
    display: flex;
    flex: 1;
    flex-direction: column;
    background: #f0f0f0;
    margin-right: 8rpx;
}
.sub-tree {
    display: none;
    .tree-item {
        .tree-content {
            .tree-label {
                &:after {
                    width: 6rpx;
                    height: 6rpx;
                    right: 12rpx;
                }
            }
        }
    }
}

.tree-item {
    .tree-content {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        &:active {
            background: rgba(#ffffff, 0.6);
        }
        .tree-label {
            font-size: $font-size-28;
            // min-height: 98rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            position: relative;
            padding: 32rpx 30rpx;
            text-align: center;
            color: #4d4d4d;
            font-weight: bold;
            // &:after {
            // 	content: '';
            // 	display: inline-block;
            // 	position: absolute;
            // 	right: 16rpx;
            // 	top: calc(50% - 8rpx);
            // 	width: 6rpx;
            // 	height: 6rpx;
            // 	transform: rotate(45deg);
            // 	border: 1px solid;
            // 	border-color: transparent currentColor currentColor transparent;
            // }
        }
    }
}

.expand {
    background: $color-white;
    border-radius: 0px 16rpx 16rpx 0px;
    box-shadow: 4rpx 0px 8rpx 0rpx rgba(0, 0, 0, 0.06);
    overflow: hidden;
    // position: relative;
    // z-index: 1;
    & > .sub-tree {
        display: block;
    }

    & > .tree-content {
        .tree-label {
            &:after {
                transform: rotate(-135deg);
                top: calc(50%);
            }
        }
    }
}

.active {
    & > .tree-content {
        .border {
            background: $app-color-main;
        }

        .tree-label {
            font-weight: 700 !important;
            color: $app-color-main;
            background: $color-white;
        }
    }
}

.tree-item {
    .tree-content {
        .tree-label {
            &:after {
                content: none;
            }
        }
    }
}
.sub-tree {
    .tree-item {
        .tree-content {
            .tree-label {
                font-weight: normal;
                &:after {
                    content: none;
                }
            }
        }
    }
}
.sub-tree {
    .expand {
        .tree-content {
            .tree-label {
                &:after {
                    content: "";
                }
            }
        }
    }
}
.sub-tree {
    .expand {
        .sub-tree {
            .tree-item {
                .tree-content {
                    .tree-label {
                        &:after {
                            content: none;
                        }
                    }
                }
            }
        }
    }
}
.sub-tree {
    .no-child {
        // box-shadow: 0px 0px 0px #ffffff;
        // border-radius: 0px;
        .tree-content {
            .tree-label {
                &:after {
                    content: none;
                }
            }
        }
    }
}
.expand {
    .tree-content {
        .tree-label {
            &:after {
                content: "";
            }
        }
    }
}
.active {
    background: $color-white;
    border-radius: 0px 16rpx 16rpx 0px;
    box-shadow: 4rpx 0px 8rpx 0rpx rgba(0, 0, 0, 0.06);
    overflow: hidden;
    .tree-content {
        .tree-label {
            &:after {
                content: "";
            }
        }
    }
}
.no-child {
    // box-shadow: 0px 0px 0px #ffffff;
    // border-radius: 0px;
    .tree-content {
        .tree-label {
            &:after {
                content: none;
            }
        }
    }
}

.border {
    height: 40rpx;
    width: 12rpx;
    background: $transparent;
    position: absolute;
    left: -6rpx;
    top: 50%;
    margin-top: -20rpx;
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    z-index: 1;
}
</style>
